<template>
  <div class="job-specification">
    <!-- 优化返回链接样式 -->
    <!-- <router-link to="/main/renshi/renshizhidu" class="back-link"><i class="el-icon-arrow-left">返回</i></router-link> -->
    <div
      style="
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
      "
    >
      <el-button
        type="primary"
        @click="$router.push('/main/renshi/renshizhidu')"
        icon="el-icon-back"
        >返回</el-button
      >

      <el-button type="info" icon="el-icon-printer" @click="printForm"
        >打印</el-button
      >
    </div>
    <!-- 主表格 -->
    <table class="main-table">
      <thead>
        <tr>
          <th colspan="6" class="table-title">职位说明书</th>
        </tr>
        <tr>
          <td colspan="6">
            职位说明书内容：1. 任职资格与甄选；2. 主要工作内容/职责描述；3.
            关键绩效指标与验证；4. 职位发展通道；5. 任职流程；6.
            员工任职资格说明。
          </td>
        </tr>
        <tr>
          <td>所属部门（分公司）</td>
          <td colspan="2">企业管理部</td>
          <td>具体部门</td>
          <td colspan="2">人资组</td>
        </tr>
        <tr>
          <td>职务名称</td>
          <td colspan="2">人事专员</td>
          <td>直接上级</td>
          <td colspan="2">系统运营主管</td>
        </tr>
        <tr>
          <td>职务代理</td>
          <td colspan="5"></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="6">
            <h3 class="section-title">任职资格与甄选</h3>
            <!-- 子表格 -->
            <table class="sub-table">
              <tr>
                <td rowspan="5">硬件条件</td>
                <td>1. 年龄性别要求</td>
                <td>18 - 25周岁，男女不限</td>
                <td rowspan="5">面试测试项目（必备技能）</td>
                <td>1. 语言表达</td>
              </tr>
              <tr>
                <td>2. 学历要求</td>
                <td>高中/中专以上学历</td>
                <td>2. 文字功底</td>
              </tr>
              <tr>
                <td>3. 工作经验要求</td>
                <td>同职位1年以上</td>
                <td>3. 人事相关工作技能</td>
              </tr>
              <tr>
                <td>4. 专业要求</td>
                <td>人力资源管理专业优先</td>
                <td>4. 沟通能力、执行能力</td>
              </tr>
              <tr>
                <td>5. 其他要求</td>
                <td>相关工作经验者优先</td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <h3 class="section-title">主要工作内容/职责描述</h3>
          </td>
        </tr>
        <tr>
          <td style="text-align: left" colspan="2">
            1. 全体职员工入职手续办理；
          </td>
          <td style="text-align: left" colspan="3">
            5. 全体职员工社保/住房公积金费用核算；
          </td>
        </tr>
        <tr>
          <td style="text-align: left" colspan="3">
            2. 全体职员工电子档案资料建立及厂证办理；
          </td>
          <td style="text-align: left" colspan="3">
            6. 全体离职人员相关手续办理与档案销助；
          </td>
        </tr>
        <tr>
          <td style="text-align: left" colspan="3">3. 全体职员工档案管理；</td>
          <td style="text-align: left" colspan="3">
            7. 各类验厂、审厂工作配合；
          </td>
        </tr>
        <tr>
          <td style="text-align: left" colspan="3">
            4. 全体职员工就业登记/社保/住房公积金办理；
          </td>
          <td style="text-align: left" colspan="3">
            8. 完成上级临时交办的其它各项工作。
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <h3 class="section-title">关键绩效指标与验证</h3>
            <table class="sub-table">
              <tr>
                <td rowspan="2">关键绩效指标</td>
                <td colspan="2">绩效指标验证途径</td>
              </tr>
              <tr>
                <td>评核部门负责人职位名称</td>
                <td>数据验证报表</td>
              </tr>
              <tr>
                <td>入职手续办理及时性</td>
                <td>系统运营主管</td>
                <td>人力资源系统</td>
              </tr>
              <tr>
                <td>人事电子档案建立及时/准确性</td>
                <td>系统运营主管</td>
                <td>人事档案核查</td>
              </tr>
              <tr>
                <td>人事档案保管完善性</td>
                <td>系统运营主管</td>
                <td>人事档案</td>
              </tr>
              <tr>
                <td>就业登记/社保/住房公积金办理及时、准确性</td>
                <td>系统运营主管</td>
                <td>工资报表</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <h3 class="section-title">职位必修课</h3>
            <ul>
              <li>人事档案管理知识</li>
              <li>沟通技巧</li>
              <li>《社保法规》《劳动法》学习</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <h3 class="section-title">晋升通道</h3>
            <ol>
              <li>晋升通道1：人事专员 → 人资专员 → 人资主管</li>
              <hr style="margin: 5px" />
              <li>晋升通道2：人事专员 → 行政专员 → 行政主管</li>
            </ol>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <h3 class="section-title">新人工作规范指引</h3>
            <table class="sub-table">
              <tr>
                <td>必须掌握的工作内容</td>
                <td>工作指引人 职位名称</td>
                <td>工作班次/配套文件名称</td>
              </tr>
              <tr>
                <td>建立档案必备资料、录用条件</td>
                <td>系统运营主管</td>
                <td>《招聘管理办法》</td>
              </tr>
              <tr>
                <td>人事档案保管相关要求</td>
                <td>系统运营主管</td>
                <td>《人事档案管理规定》</td>
              </tr>
              <tr>
                <td>社保、住房公积金等相关工作</td>
                <td>系统运营主管</td>
                <td>《社保管理办法》</td>
              </tr>
              <tr>
                <td>人力资源系统操作</td>
                <td>系统运营主管</td>
                <td>不定期培训</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>复核：</td>
          <td>审核：</td>
          <td colspan="3">制订：</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    printForm() {
      window.print();
    },
  },
  components: {},
};
</script>

<style scoped>
/* 统一字体 */
.job-specification {
  font-family: "宋体", sans-serif;
  /* max-width: 80%; */
  overflow-x: auto;
  padding: 20px;
  margin: 0px auto;
  width: 210mm;
  background-color: white;
}

/* 返回链接样式 */
.back-link {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-block;
  margin-bottom: 20px;
  color: #007bff;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* 主表格样式 */
.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.main-table th,
.main-table td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
}

.main-table th {
  background-color: #f0f0f0;
}

/* 表格标题样式 */
.table-title {
  font-size: 24px;
  padding: 20px;
}

/* 章节标题样式 */
.section-title {
  font-size: 18px;
  margin: 20px 0 10px;
}

/* 子表格样式 */
.sub-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.sub-table th,
.sub-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.sub-table th {
  background-color: #f9f9f9;
}

/* 列表样式 */
ol,
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ol li,
ul li {
  margin-bottom: 8px;
}
</style>